<!DOCTYPE html>
<html lang="en" class="ui-mobile">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>@ViewBag.Title</title>
    <link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
    <link rel="stylesheet" type="text/css" href="~/content/smartparking.mobile.css">
    <!-- Of course it is advisable to have touch icons ready for each device -->
    <link rel="apple-touch-icon" href="~/content/images/touch-icon-iphone.png">
    <link rel="apple-touch-icon" sizes="72x72" href="~/content/images/touch-icon-ipad.png">
    <link rel="apple-touch-icon" sizes="114x114" href="~/content/images/touch-icon-iphone4.png">
    <link rel="stylesheet" href="~/content/add2home.css">
    <script type="text/javascript">
        var addToHomeConfig = {
            animationIn: 'bubble',
            animationOut: 'drop',
            lifespan: 10000,
            expire: 2,
            touchIcon: true,
            message: 'Install SmartParking web app on your <strong>%device</strong>: tap `%icon` and then <strong>`Add to Home Screen`</strong>'
        };
    </script>
    <script type="text/javascript" src="~/scripts/add2home.js" charset="utf-8"></script>
    @Styles.Render("~/content/mobileCss", "~/content/css")
    @Scripts.Render("~/bundles/modernizr")
    @RenderSection("styles", required: false)
</head>
<body class="ui-mobile-viewport ui-overlay-c">
    <div data-role="page" data-theme="b">
        <div data-theme="b" data-role="header" data-position="fixed">
            <h3>
                @ViewBag.Title
            </h3>
            <a id="cmdBack" data-role="button" data-rel="back" data-transition="fade" href="#page1"
                data-icon="back" data-iconpos="left" class="ui-btn-left">Regresar
            </a>
            @if (User.Identity.IsAuthenticated)
            {
                <a id="cmdNext" data-role="button" data-transition="fade" href="@Url.Action("Logout")" data-icon="minus"
                    data-iconpos="left" class="ui-btn-right">Salir
                </a>
            }
        </div>
        <div data-role="content">
            @RenderBody()
        </div>
        <div data-theme="b" data-role="footer" data-position="fixed" style="text-align: center">
            <a data-role="button" data-transition="fade" data-theme="e" href="@Url.Action("Reservation", "Mobile")"
                    data-icon="home" data-iconpos="top">Reservar</a>
            <a data-role="button" data-transition="fade" data-theme="e" href="@Url.Action("Reservations", "Mobile")"
                    data-icon="star" data-iconpos="top">Mis Reservaciones</a>
            <a data-role="button" data-transition="fade" data-theme="e" href="@Url.Action("Account", "Mobile")"
                    data-icon="grid" data-iconpos="top">Mi Cuenta</a>
        </div>
    </div>
    @Scripts.Render("~/bundles/jquery")
    <script>
        $(document).on("mobileinit", function () {
            $.mobile.ajaxEnabled = false;
        });
    </script>
    @Scripts.Render("~/bundles/jquerymobile")
    <script src="~/Scripts/smartparking.js"></script>
    @RenderSection("scripts", required: false)
    @RenderSection("scripts2", required: false)
</body>
</html>
